<template>
  <div class="history-push-page page">
    <div class="title-group">
      <i class="iconfont iconfont-fanhui" @click="handleGotoIndex"></i>
      <span>历史推送</span>
    </div>
    <div class="page-content">
      <div class="condition-row">
        <div class="condition-item" @click="dateShow = true">
          <i class="iconfont iconfont-shijian"></i>
          <span class="date-text" v-if="!condition.startDate && !condition.endDate">按时间</span>
          <template v-else>
            <span class="date-text">{{condition.startDate}}-{{condition.endDate}}</span>
            <i class="iconfont iconfont-guanbi1" @click.stop="handleClearDate"></i>
          </template>
        </div>
        <div class="condition-item input-condition-item">
          <field
              v-model="condition.search_text"
              label=""
              clearable
              icon-prefix="iconfont"
              right-icon="sousuo"
              placeholder="搜索关键词"
              @clear="handleClearSearchText"
              @click-right-icon="handleSearch"
          />
        </div>
        <calendar allow-same-day v-model:show="dateShow" type="range" @confirm="handleDateTimeConfirm" />
      </div>
      <div class="his-content" @scroll="handleScroll" ref="hisRef">
        <div class="his-list">
          <div class="his-item" v-for="item in dataList" :key="item.id" @click="handleGotoDetail(item)">
            <p class="title">{{item.title}}</p>
          </div>
          <loading size="24" color="#3158D7" v-show="dataLoading"/>
        </div>
      </div>
    </div>
  </div>
  <footer-menus></footer-menus>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {Calendar, Field, Loading, showLoadingToast } from "vant";
import {useRouter, useRoute} from "vue-router";
import api from '../../api/index'
import common from "../../common/common";
import {HistoryPushItem} from "../../types";
import FooterMenus from '../../components/footer-menus.vue'
import {formatTime, formatTime3, uuid} from "../../common/utils";
defineOptions({
  name: "HistoryPush"
})
const router = useRouter()
const route = useRoute()
let uid = route.query.uid || ''
if (uid) {
  common.setLocalUid(uid)
} else {
  uid = common.getLocalUid()
}
const dateShow = ref(false)

const hisRef = ref()
const condition = ref({
  page_index: 1,
  page_size: 15,
  search_text: '',
  start_time: '',
  end_time: '',
  startDate: '',
  endDate: '',
  total_page: 0,
})
const dataLoading = ref(false)
const dataList = ref<HistoryPushItem[]>([])
const getHisPushData = async (refresh?: boolean) => {
  let toast
  if (refresh) {
    condition.value.page_index = 1
    dataList.value = []
    toast = showLoadingToast({
      message: '加载中...',
      forbidClick: true,
      overlay: true,
      duration: 0,
    });
  } else {
    dataLoading.value = true
  }
  try {
    const res = await api.getHistoryPushData({
      uid,
      page_index: condition.value.page_index,
      page_size: condition.value.page_size,
      search_text: condition.value.search_text,
      start_time: condition.value.start_time,
      end_time: condition.value.end_time,
    })
    dataLoading.value = false
    if (toast) {
      toast.close()
    }
    if (res.data) {
      condition.value.total_page = Math.ceil(res.data.total/condition.value.page_size)
      if (res.data.history) {
        dataList.value = dataList.value.concat(res.data.history)
      }
    }
  } catch(e){
    dataLoading.value = false
    if (toast) {
      toast.close()
    }
  }

}
const handleClearDate = () => {
  condition.value.start_time = ''
  condition.value.end_time = ''
  condition.value.startDate = ''
  condition.value.endDate = ''
  getHisPushData(true)
}
const handleDateTimeConfirm = (date) => {
  try {
    condition.value.start_time = formatTime(date[0].getTime())
    condition.value.end_time = formatTime(date[1].getTime())
    condition.value.startDate = formatTime3(date[0].getTime())
    condition.value.endDate = formatTime3(date[1].getTime())
    dateShow.value = false
    getHisPushData(true)
  } catch(e){}
}
const handleScroll = () => {
  if (dataLoading.value || condition.value.page_index >= condition.value.total_page) {
    return
  }
  const sh = hisRef.value.scrollHeight
  const st = hisRef.value.scrollTop
  const ch = hisRef.value.clientHeight
  if (st >= sh - ch - 100) {
    condition.value.page_index += 1
    getHisPushData(false)
  }
}
const handleClearSearchText = () => {
  getHisPushData(true)
}
const handleSearch = () => {
  getHisPushData(true)
}
const handleGotoDetail = (item: HistoryPushItem) => {
  router.push(`/detail?id=${item.id}`)
}
const handleGotoIndex = () => {
  router.replace('/index')
}
getHisPushData(true)
</script>

<style scoped lang="less">
.history-push-page{
  position: relative;
  height: 100%;
  padding-bottom: 52px;
  box-sizing: border-box;
  overflow: hidden;
  background: var(--van-primary-color);
  .page-content{
    overflow-y: auto;

  }
  .title-group{

  }
  .his-content{
    position: relative;
    overflow-y: auto;
    height: calc(100% - 206px);
  }
  .his-list{
    position: relative;
  }
  .his-item{
    position: relative;
    background: #fff;
    border-radius: 3px;
    padding: 10px;
    font-size: 16px;
    &+.his-item{
      margin-top: 20px;
    }
    .title{
      word-break: break-all;
    }
  }
}
.condition-row{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  margin-bottom: 10px;
  .condition-item{
    display: flex;
    align-items: center;
    color: #576B95;
    .iconfont{
      font-size: 20px;
    }
    .date-text{
      margin: 0 5px;
    }
  }
  .input-condition-item{
    width: 150px;
  }
}
.van-loading{
  text-align: center;
  padding: 10px 0;
}
</style>
